<!--
 * @Descripttion: 设备数据类型列表
 * @LastEditors: xzh
 * @LastEditTime: 2023-10-19 22:47:00
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{
        $t(`page.dashboardManageArr.equipDashboardArr.${equipDataType}`)
      }}</span>
    </template>
    <!-- 选择对象表格 -->
    <DileTable
      :class="
        [equipDataTypeEnum.shapingEquip, equipDataTypeEnum.otherEquip].includes(
          //@ts-ignore
          equipDataType
        )
          ? 'hide-colgroup'
          : ''
      "
    >
      <template #preColumn>
        <template
          v-for="(column, index) in EquipDataTypeListUtils.tableColumnMap[
            equipDataType
          ]"
          :key="column.field"
        >
          <vxe-colgroup
            v-if="(column.childern || []).length > 0"
            align="center"
            :title="
              $t(column.title) + (!!column.unit ? `(${column.unit})` : ``)
            "
          >
            <vxe-column
              v-for="child in column.childern"
              :field="child.field"
              :key="child.field"
              :min-width="80"
              :formatter="column.formatter"
              :width="child.width || ''"
            />
          </vxe-colgroup>
          <vxe-column
            v-else
            :field="column.field"
            :min-width="130"
            :width="column.width || ''"
            :formatter="column.formatter"
            :title="
              $t(column.title) + (!!column.unit ? `(${column.unit})` : ``)
            "
          />
        </template>
      </template>
    </DileTable>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, provide, watch } from "vue";
import { equipDataTypeEnum } from "../index.type";
import { propsParam_Inf } from "@/components/dile-table/index.type";
import DileTable from "@/components/dile-table/index.vue";
import EquipDataTypeListUtils from "./utils";

const props = defineProps({
  //设备数据类型
  equipDataType: {
    type: String,
    requited: true,
    default: "",
  },
  dataArr: {
    type: Array,
    requited: true,
    default: [],
  },
});

watch(
  () => props.dataArr,
  () => {
    initTableData();
  }
);

/**
 * @Author: xzh
 * @Descripttion: 加载列表数据
 * @Param:
 */
let initTableData = async () => {
  let { equipDataType } = props;
  Object.assign(propsParam, {
    tableData: props.dataArr,
    loading: false,
  });
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: true,
  tableData: [],
  isPagination: false,
  bottomUp: true,
  maxHeight: 300,
  scrollX: {
    enabled: false,
  },
  scrollY: {
    enabled: false,
  },
  emitEvents: {
    refreshTable: initTableData,
  },
});
provide("propsParam", propsParam);
</script>
<style lang="scss" scoped>
.el-card-bottom-top {
  :deep(.el-card__body) {
    .hide-colgroup {
      thead {
        > tr:last-child {
          display: none;
        }
      }
    }
  }
}
</style>
